<template>
	<view class="swiper-box">
		<swiper :current="currentNum" previous-margin="280rpx" @change="changeCinema" next-margin="50rpx">
			<swiper-item :class="item == currentNum?'active-swiper-item':''" @click='onChange(index,item)'
				v-for="(item,index) in filmList" :key="item.FilmCode">
				<image :class="index == currentNum ? 'swiper-img-active':'swiper-img'" style="z-index:99"
					mode="widthFix" :src="item.Imageurl"></image>
			</swiper-item>
		</swiper>
		<view class="film-info">
			<view class="triangle-up"></view>
			<view style="display: flex;">
				<text class="film-name">{{currentFilmInfo.FilmName}}</text>
				<text style="color: #F0AD4E;margin-left: 10rpx;" v-if="currentFilmInfo.score">
					<text style="font-size: 30rpx;font-weight: bold;">{{ currentFilmInfo.score}}</text>
					分</text>
			</view>
			<text style="color: #999;">{{currentFilmInfo.Duration}}分钟 | {{oneType}}</text>
			<text style="color: #999;">{{castList}}</text>
		</view>

	</view>
</template>

<script>
	import {
		queryFilms,
		querySession
	} from '../../common/http/api'


	export default {
		props: ["slideToCode"],
		data() {
			return {
				currentNum: 0,
				filmList: [],
				name: '',
				currentFilmInfo: {
					Imageurl: '',
					FilmName: '',
					Duration: '',
					PublishDate: ''
				},
				oneType: '',
				castList: '',
				titleBarHeight: '',
				statusBarHeight: '',
			}
		},
		methods: {

			changeCinema(e) {
				const {
					current
				} = e.detail
				this.currentNum = current
				this.currentFilmInfo = this.filmList[current]
				uni.$emit('changeFilmCode', this.filmList[current])
				this.handleInfo();
			},
			onChange(index, filmInfo) {
				if (this.currentNum === index) {
					uni.navigateTo({
						url: "../../pages/filmInfo/filmInfo"
					})
					this.$store.commit('setFilmInfo', this.currentFilmInfo)
				}
				this.currentNum = index
				this.currentFilmInfo = filmInfo
				this.handleInfo()
			},
			handleInfo() {
				if (this.currentFilmInfo.Cast.trim().length) {
					const list = this.currentFilmInfo.Cast.split('/').slice(0, 3)
					// console.log(this.currentFilmInfo.filmType);
					this.castList = list[0] ? list.join('、') + ' >' : '';

				} else {
					this.castList = []
				}
			},
			queryFilms() {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				queryFilms().then((res) => {
					const {
						data,
						resultCode,
						msg
					} = res
					if (resultCode === '000') {
						uni.$emit('firstFilmCode', data.Films)
					} else {
						uni.hideLoading();
						uni.showToast({
							title: msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},

		},
		mounted() {
			this.queryFilms()
			uni.$once('sortList', list => {
				this.filmList = list
				this.currentFilmInfo = list[0]
				uni.$emit('changeFilmCode', list[0])
				this.currentNum = 0
				this.handleInfo();
				this.$emit("closeMask")
				uni.hideLoading();

			})
			uni.$once('sysHeight', data => {
				this.titleBarHeight = data.titleBarHeight
				this.statusBarHeight = data.statusBarHeight
			})
		},
		watch: {
			currentFilmInfo(n) {
				this.oneType = n.filmType
			},
			slideToCode(n) {
				if (n) {
					this.currentNum = this.filmList.findIndex(item => item.FilmCode == n)
				}

				// = index
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		width: 100%;
		z-index: 9;
		position: absolute;

		background-color: #f0f0f5;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		top: 160px;

		swiper {
			height: 300rpx;
			display: flex;
			align-items: center;
			background-size: 100% 100%;

			swiper-item {
				width: 45% !important;
				display: flex;
				justify-content: center;
				align-items: center;

				.swiper-img {
					width: 150rpx;
					height: 200rpx !important;
					border-radius: 8rpx;
				}

				.swiper-img-active {
					width: 150rpx;
					height: 210rpx !important;
					border-radius: 10rpx;
					transform: scale(1.2);
				}
			}
		}

		.film-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			padding-top: 20rpx;
			margin-top: 15rpx;

			text {
				font-size: 26rpx;
			}

			.film-name {
				font-size: 30rpx;
				font-weight: bold;
			}

			.triangle-up {
				width: 0;
				height: 0;
				border-left: 18rpx solid transparent;
				border-right: 18rpx solid transparent;
				border-bottom: 30rpx solid #fff;
				margin-top: -40rpx;
			}
		}

	}
</style>